//文档加载事件
$(function () {

    //初始化插件
    $("#slider").slidebox({
        boxh: 400, //盒子的高度
        w: 1000, //图片的宽度
        h: 370, //图片的高度
        isShow: true, //是否显示控制器
        isShowBtn: true, //是否显示左右按钮
        controltop: 10, //控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
        controlsW: 12, //控制按钮宽度
        controlsH: 12, //控制按钮高度
        radius: 6 //控制按钮圆角度数
    });
    //电子书轮播
    $(".bookslide").slidebox({
        boxh: 218, //盒子的高度
        w: 328, //图片的宽度
        h: 218, //图片的高度
        isShow: true, //是否显示控制器
        isShowBtn: true, //是否显示左右按钮
        controltop: 10, //控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
        controlsW: 30, //控制按钮宽度
        controlsH: 6, //控制按钮高度
        radius: 3 //控制按钮圆角度数
    });

    //首页公共轮播样式
    $(".indexslide").slidebox({
        boxh: 340, //盒子的高度
        w: 420, //图片的宽度
        h: 340, //图片的高度
        isShow: true, //是否显示控制器
        isShowBtn: true, //是否显示左右按钮
        controltop: 10, //控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
        controlsW: 30, //控制按钮宽度
        controlsH: 6, //控制按钮高度
        radius: 3 //控制按钮圆角度数
    });

    //电子书手风琴
    $('.book-newbook li').on('mouseenter', function () {
        //div里面的内容隐藏
        $('.book-newbook li div').hide()
        //其他li下面的标题显示
        $('.book-newbook li h4').show()

        //隐藏当前li下面的标题
        $('h4', this).hide();

        //显示当前li下面的内容
        $('div', this).show();


    })

    //电子书选项卡
    $('.book-menu li').on('mouseenter', function () {
        $(this).addClass('active').siblings().removeClass()

        //获取索引
        let index = $(this).index()

        //显示对应索引的内容
        $('.book-list').eq(index).addClass('on').siblings('.book-list').removeClass('on')
    })

    //服装选项卡
    $('.cloth-menu li').on('mouseenter', function () {
        $(this).addClass('active').siblings().removeClass()

        //获取索引
        let index = $(this).index()

        //显示对应索引的内容
        $('.cloth .index-list').eq(index).addClass('on').siblings('.index-list').removeClass('on')
    })


    //户外运动选项卡
    $('.sports .sports-menu li').on('mouseenter', function () {
        $(this).addClass('active').siblings().removeClass()

        //获取索引
        let index = $(this).index()

        //显示对应索引的内容
        $('.sports .index-list').eq(index).addClass('on').siblings('.index-list').removeClass('on')
    })

    //童装选项卡
    $('.child .child-menu li').on('mouseenter', function () {
        $(this).addClass('active').siblings().removeClass()

        //获取索引
        let index = $(this).index()

        //显示对应索引的内容
        $('.child .index-list').eq(index).addClass('on').siblings('.index-list').removeClass('on')
    })

    //商品选项卡
    $('.goods .goods-menu li').on('mouseenter', function () {
        $(this).addClass('active').siblings().removeClass()

        //获取索引
        let index = $(this).index()

        //显示对应索引的内容
        $('.goods .goods-list').eq(index).addClass('on').siblings('.goods-list').removeClass('on')
    })


    //楼层滚动效果
    /* 
        需求: 
            1) 鼠标移入floor p
               a. 改变背景图水平轴定位
               b. 添加背景色
    */
    $('.floor p').on({
        'mouseenter': function () {
            //获取对应颜色
            let bgc = $(this).data('bgc')
            //改变样式
            $(this).css({
                backgroundColor: bgc,
                backgroundPositionX: -40,
                width: 80
            })
        },
        'mouseleave': function () {

            //改变样式
            $(this).css({
                backgroundColor: "",
                backgroundPositionX: 0,
                width: 40
            })
        },
        'click': function () {
            //获取索引
            let index = $(this).index()
            if (index === 5) {
                $('html').animate({
                    scrollTop: 0
                })
            } else {
                //获取对应楼层距离文档顶部的偏移
                let sTop = $('.floorbox').eq(index).offset().top
                //滚动到相应的位置
                $('html').animate({
                    scrollTop: sTop
                })
            }



        }

    })

    //回到顶部
    $('.foot-retop').on('click', function () {
        $('html').animate({
            scrollTop: 0
        })
    })


    //固定顶部框: 当前滚动距离大于800,显示  否则:隐藏
    $(window).on('scroll', function () {
        let stop = $('html').scrollTop()
        if (stop > 800) {
            $('.fixTop').slideDown()
            $('.head-fixTop').appendTo('.fixTop')
            return
        } else {
            $('.fixTop').slideUp()
            $('.head-fixTop').appendTo('.head')
            return
        }
    })
})